<template>
<div class="card-bjgl">
  <div class="card-namee">
  <div class="tatel">
    <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入 班级名称、教师名称、学生名称、开班年份、开班季节，开班类型" class="ivu-input ivu-input-default">
    <button data-v-7965717c="" type="button" class="ivu-btn ivu-btn-primary"><!----> <i class="ivu-icon ivu-icon-ios-search"></i> <span>查询</span></button>
    <div data-v-7965717c="" class="ivu-divider ivu-divider-vertical ivu-divider-default"><!----></div>
    <button data-v-7965717c="" type="button" class="ivu-btn ivu-btn-primary"><!----> <i class="ivu-icon ivu-icon-ios-search"></i> <span>添加班级</span></button>
  </div>
    <Card v-for="item in this.FormData" :key="item.tearcherName">
      <div class="class-name">
        <img src="../assets/img/dlkbjt.jpg" width="100px" class="class-image">
        <h4>2000春_PY</h4>
      </div>
      <Form>
        <FormItem label="教师">{{item.tearcherName}}</FormItem>
        <FormItem label="人数">{{item.count}}</FormItem>
        <FormItem label="计划"><Button type="text" size="small">{{item.plan}}</Button></FormItem>
        <FormItem label="类型">{{state[item.state]}}</FormItem>
        <FormItem label="状态">{{type[item.type]}}</FormItem>
        <FormItem label="进展">{{item.progress}}</FormItem>
        <FormItem label="校区">{{item.scholl}}</FormItem>
      </Form>
      <!-- 更多内容 -->
      <div class="class-more-icon">
        <p @mouseover="mouseOver"><Icon type="ios-arrow-up"></Icon></p>
      </div>
      <div data-v-f3f7200a="" class="blc-other-info" :style="active" @mouseleave="mouseLeave">
          <div data-v-f3f7200a="" class="item-label">
            <div class="class-more-icon">
              <p class="p-icon"><Icon type="ios-arrow-up"></Icon></p>
            </div>
            <span data-v-f3f7200a="" class="item-title">创建时间</span>
            <span data-v-f3f7200a="" class="item-content">2020-03-20 17:36:51</span></div>
            <div data-v-f3f7200a="" class="item-label"><span data-v-f3f7200a="" class="item-title">上课时间</span>
            <span data-v-f3f7200a="" class="item-content">日，一，二，三，四，五，六</span></div>
            <div data-v-f3f7200a="" class="item-label"><span data-v-f3f7200a="" class="item-title">练习限制</span>
            <span data-v-f3f7200a="" class="item-content">关闭</span></div><!---->
            <div data-v-f3f7200a="" class="item-label"><span data-v-f3f7200a="" class="item-title">题目数量</span>
            <span data-v-f3f7200a="" class="item-content">单选0题 / 多选0题</span></div>
            </div>
      <!-- 底部 -->
      <div>
        <span>
          <Button type="text" size="small" class="class-btn-text"><span class="bottontext">学生</span></Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text"><span class="bottontext">统计</span></Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text"><span class="bottontext">考试</span></Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text"><span class="bottontext">上课</span></Button>
        </span>
        <span>
          <Button type="text" size="small" class="class-btn-text"><span class="bottontext">编辑</span></Button>
        </span>
      </div>
    </Card>
    </div>
  </div>
</template>
<script>
export default{
  data () {
    return {
      active: '',
      type: ['集训','金牌','体验'],
      state: ['准备','进行中','结束'],
      FormData: [{
        tearcherName: '康子娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      },{
        tearcherName: '康1娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      },{
        tearcherName: '康1娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      },{
        tearcherName: '康1娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      },{
        tearcherName: '康1娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      },{
        tearcherName: '康1娟',
        count: 15,
        plan: '2020春——PY——金牌计划',
        type: 1,
        state: 1,
        progress:15.00,
        scholl: '山东东营校区'
      }]
    }
  },
  components: {

  },
  methods: {
    // 移入
        mouseOver() {
          setTimeout(this.active = "display:inline;transition: 2s;",3000)
        },
        // 移出
        mouseLeave() {
          setTimeout(this.active = "display:none;transition: 2s;",3000)
        }
  }
}
</script>

<style>
  .card-bjgl {
    width:100%;
    height: 100%;
    padding: 0.625rem;
    background-color: #FFFFFF;
  }
  .tatel {
    width: 100%;
    height: 2.5rem;
    padding-top: 0.625rem;
    margin-bottom: 0.9375rem;
  }
  .class-image {
    border-radius: 8px;
  }
  .card-namee {
    width: 70rem;
    width: 100%;
  }
  .class-btn-text {
    margin-left: 0.1875rem;
  }
  .ivu-input {
    width: 35.625rem;
    margin-right: 1.25rem;
    margin-left: 0.625rem;
  }

  .class-more-icon p {
    text-align:center;
  }
  .p-icon {
    margin-left: 30px;
  }
  .bottontext {
    color: #2D8CF0;
    font-size: 0.75rem;
  }
  .ivu-card {
    width: 17rem;
    height: 26rem;
    margin: 0.625rem;
    float: left;
  }
  .ivu-form-item {
    margin: 0;
  }
  .blc-other-info {
    display: none;
    position: absolute;
    height: 137px;
    top: 220px;
    background-color: #FFFFFF;
  }
  .item-label {
    margin-top: 5px;
  }
  .item-title,.item-content{
    font-size: 12px;
  }
</style>
